<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
    <link rel="stylesheet" href="./css/_reset.css" />
    <!-- 引入字体图标库 -->
    <link rel="stylesheet" href="./css/font/iconfont.css" />
    <!-- 引入首页样式 -->
    <link rel="stylesheet" href="./css/index.css" />
    <!-- 引入animate动画 -->
    <link rel="stylesheet" href="./swiper/animate.min.css" />
    <!-- 引入swiper动画 -->
    <link rel="stylesheet" href="./swiper/swiper.min.css" />
  </head>
  <body>
    <!-- 顶部导航栏 -->
    <!-- .nav>.logo>a+ul.subnav>li*7>a -->
    <div class="nav">
      <div class="logo">
        <a href="./index.html"></a>
      </div>
      <ul class="subnav">
        <li class="active sub_li"><a href="">首页</a></li>
        <li class="sub_li"><a href="">关于我们</a></li>
        <li class="sub_li"><a href="">产品中心</a></li>
        <li class="sub_li"><a href="">预约设计</a></li>
        <li class="sub_li"><a href="">新闻资讯</a></li>
        <li class="sub_li"><a href="">服务平台</a></li>
        <li class="sub_li"><a href="">联系我们</a></li>
      </ul>
    </div>
    <!-- 中间轮播图 -->
    <div class="banner">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <!-- banner的图片区域 -->
            <div class="banner-img">
              <img src="./images/index/banner1.png" alt="" />
            </div>
            <!-- banner的文字区域 -->
            <div class="banner-text">
              <h3
                class="ani"
                swiper-animate-effect="bounceInDown"
                swiper-animate-duration="2s"
              >
                WARM & HOME & LIFE
              </h3>
              <p
                class="ani"
                swiper-animate-effect="bounceInDown"
                swiper-animate-duration="1.5s"
              >
                GIVEYOUACOMFORTABLEHOME
              </p>
              <p
                class="ani"
                swiper-animate-effect="bounceInUp"
                swiper-animate-duration="1.5s"
              >
                创 新 家 具 领 军 品 牌
              </p>
              <div class="banner-xian"></div>
              <p
                class="ani"
                swiper-animate-effect="bounceInUp"
                swiper-animate-duration="2s"
              >
                给 你 温 暖 的 家
              </p>
            </div>
          </div>
          <!-- 第二张图 -->
          <div class="swiper-slide">
            <div class="banner-img">
              <img src="./images/index/banner2.png" alt="" />
            </div>
            <div class="banner-text">
              <h3
                class="ani"
                swiper-animate-effect="bounceInLeft"
                swiper-animate-duration="1.5s"
              >
                WARM & HOME & LIFE
              </h3>
              <p
                class="ani"
                swiper-animate-effect="bounceInLeft"
                swiper-animate-duration="2s"
              >
                GIVEYOUACOMFORTABLEHOME
              </p>
              <p
                class="ani"
                swiper-animate-effect="bounceInRight"
                swiper-animate-duration="2s"
              >
                创 新 家 具 领 军 品 牌
              </p>
              <div class="banner-xian"></div>
              <p
                class="ani"
                swiper-animate-effect="bounceInRight"
                swiper-animate-duration="1.5s"
              >
                给 你 温 暖 的 家
              </p>
            </div>
          </div>
          <!-- 第三张图 -->
          <div class="swiper-slide">
            <div class="banner-img">
              <img src="./images/index/banner3.png" alt="" />
            </div>
            <div class="banner-text">
              <h3
                class="ani"
                swiper-animate-effect="bounceInDown"
                swiper-animate-duration="2s"
              >
                WARM & HOME & LIFE
              </h3>
              <p
                class="ani"
                swiper-animate-effect="bounceInDown"
                swiper-animate-duration="1.5s"
              >
                GIVEYOUACOMFORTABLEHOME
              </p>
              <p
                class="ani"
                swiper-animate-effect="bounceInUp"
                swiper-animate-duration="1.5s"
              >
                创 新 家 具 领 军 品 牌
              </p>
              <div class="banner-xian"></div>
              <p
                class="ani"
                swiper-animate-effect="bounceInUp"
                swiper-animate-duration="2s"
              >
                给 你 温 暖 的 家
              </p>
            </div>
          </div>
        </div>
        <!-- 轮播图内下方文字 -->
        <div class="banner-con animate-bounce-up">
          <div class="con-text">
            <span class="line"></span> 恣在家<span class="line"></span>
          </div>
          <div class="con-img">
            <img src="./images/index/banner-arrow.png" alt="" />
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <!-- 固定定位的侧边栏 -->
    <div class="nav-slide">
      <ul>
        <li>姿在家</li>
        <!-- 此处a标签用来做锚点跳转用 -->
        <li>
          <a href="#shenghuo">
            <span class="iconfont nav-icon">&#xe607;</span>生活馆
          </a>
        </li>
        <li>
          <a href="#sheji">
            <span class="iconfont nav-icon">&#xe61d;</span>
            设计馆
          </a>
        </li>
        <li>
          <a href="#xinwen">
            <span class="iconfont nav-icon">&#xe647;</span>
            新闻馆
          </a>
        </li>
        <li>
          <a href="#fuwu">
            <span class="iconfont nav-icon">&#xe614;</span>
            服务馆
          </a>
        </li>
        <li>
          <a href="#zhonxin">
            <span class="iconfont nav-icon">&#xe606;</span>
            中心馆
          </a>
        </li>
        <li>
          <a href="#">
            <span class="iconfont nav-icon">&#xe62b;</span>
            返回顶部
          </a>
        </li>
      </ul>
    </div>
    <!-- 生活馆 -->
    <a name="shenghuo"></a>
    <div class="life">
      <h1>生活馆</h1>
    </div>
    <!-- 设计馆 -->
    <a name="sheji"></a>
    <div class="design">
      <h1>设计馆</h1>
    </div>
    <!-- 底部信息 -->
    <!-- .bottom>(.bottom_text>ul*6>li*5>a)+.bottom_end -->
    <div class="bottom">
      <div class="bottom_text">
        <ul>
          <li>关于我们</li>
          <li><a href="">公司简介</a></li>
          <li><a href="">文化产品</a></li>
          <li><a href="">发展历程</a></li>
        </ul>
        <ul>
          <li>产品中心</li>
          <li><a href="">现代都市</a></li>
          <li><a href="">折叠城市</a></li>
          <li><a href="">清风物语</a></li>
          <li><a href="">落落星辰</a></li>
        </ul>
        <ul>
          <li>预约设计</li>
          <li><a href="">精牌设计</a></li>
          <li><a href="">设计申请</a></li>
          <li><a href="">客户案例</a></li>
        </ul>
        <ul>
          <li>新闻资讯</li>
          <li><a href="">品牌资讯</a></li>
          <li><a href="">热门观点</a></li>
          <li><a href="">家具动态</a></li>
          <li><a href="">精彩视频</a></li>
        </ul>
        <ul>
          <li>服务平台</li>
          <li><a href="">理念服务</a></li>
          <li><a href="">服务支持</a></li>
          <li><a href="">服务承诺</a></li>
          <li><a href="">在线保修</a></li>
        </ul>
        <ul>
          <li>联系我们</li>
          <li>
            <p>
              <span class="iconfont">&#xe608;</span
              >河南省-郑州高新区-万仙山-万仙洞
            </p>
          </li>
          <li>
            <p><span class="iconfont">&#xe678;</span>110-123456789</p>
          </li>
          <li>
            <p><span class="iconfont">&#xe6e7;</span>www.110.com</p>
          </li>
        </ul>
      </div>
      <div class="bottom_end">
        <ul>
          <li>
            <p>
              © 2017姿在家家居用品股份有限公司版权所有法 律 声 明 及 隐 私 权 政
              策 · 知 识 产 权新ICP备 05003017号新公网安备：65010402001003号
            </p>
          </li>
          <li>
            <span>友情链接：</span>
            <a href="">
              <span class="iconfont">&#xe616;</span>
            </a>
            <a href="">
              <span class="iconfont">&#xe635;</span>
            </a>
            <a href="">
              <span class="iconfont">&#xe615;</span>
            </a>
            <a href="">
              <span class="iconfont">&#xe609;</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <script src="./swiper/swiper.min.js"></script>
    <script src="./swiper/swiper.animate1.0.3.min.js"></script>
    <script src="./js/index.js" type="module"></script>
  </body>
</html>
